<template>
  <el-drawer
    :title="title"   
    :visible.sync="dialog"
    direction="rtl"
    :with-header="false"
    custom-class="box_drawer"
    size="80%"
    ref="drawer"
  >
    <div class="drawer_content">
      <el-form :model="form" :label-width="formLabelWidth">
        <div class="drawer_main">
          <div class="box_card">
            <div class="box_header">
              <span>过滤警情详细信息</span>
              <vab-icon
                :icon="['fas', 'angle-up']"
                v-if="isShow"
                @click="moreQuery"
              ></vab-icon>
              <vab-icon
                :icon="['fas', 'angle-down']"
                v-else
                @click="moreQuery"
              ></vab-icon>
            </div>
            <div class="box_content">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警方式">
                    <el-select
                      v-model="queryForm.username"
                      placeholder="报警方式"
                      style="width: 100%"
                      disabled
                    >
                      <el-option
                        label="110电话报警"
                        value="1"
                      ></el-option>
                      <el-option
                        label="120电话报警"
                        value="2"
                      ></el-option>
                      <el-option
                        label="119电话报警"
                        value="3"
                      ></el-option>                      
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="来话类别">
                    <el-select
                      v-model="queryForm.username"
                      placeholder="来话类别"
                      style="width: 100%"
                      disabled
                    >
                      <el-option
                        label="出租车纠纷"
                        value="1"
                      ></el-option>                                           
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警类型">
                    <el-select
                      v-model="queryForm.username"
                      placeholder="报警类型"
                      style="width: 100%"
                      disabled
                    >
                      <el-option
                        label="出租车纠纷"
                        value="1"
                      ></el-option>                                           
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警人">
                    <el-input
                      v-model.trim="queryForm.username"
                      clearable
                      class="input-with-select"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="性别">
                    <el-select
                      v-model="queryForm.username"
                      style="width: 100%"
                      disabled
                    >
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警电话">
                    <el-input
                      v-model.trim="queryForm.username"
                      clearable
                      class="input-with-select"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="联系电话">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警人住址">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="处警标识">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警时间">
                    <el-date-picker
                      v-model="queryForm.username"
                      type="date"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="报警人">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="事发地址">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="接警单位">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="登记时间">
                    <el-date-picker
                      v-model="queryForm.username"
                      type="date"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="修改人">
                    <el-input v-model.trim="queryForm.username" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <el-form-item label="修改时间">
                    <el-date-picker
                      v-model="queryForm.username"
                      type="date"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                
              </el-row>
              <el-row :gutter="20" v-if="isShow">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="报警内容">
                    <el-input
                      v-model.trim="queryForm.username"
                      type="textarea"
                      :rows="5"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="处理时限">
                    <el-date-picker
                      v-model="queryForm.username"
                      type="date"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="通知内容">
                    <el-input
                      v-model.trim="queryForm.username"
                      type="textarea"
                      :rows="5"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>         
        </div>
      </el-form>
      <div class="drawer_footer">       
        <el-button type="primary" @click="cancelForm">关 闭</el-button>
        <!-- <el-button
          type="primary"
          @click="$refs.drawer.closeDrawer()"
          :loading="loading"
        >
          {{ loading ? '打印中 ...' : '打 印' }}
        </el-button> -->
      </div>
    </div>    
  </el-drawer>
</template>

<script>
export default {
  name: 'edit',
  components: {},
  data() {
    return {     
      title: '',
      dialog: false,
      loading: false,
      isShow: true,
      isShow1: true,
      isShow2: true,
      isShow3: true,
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        username: '',
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '100px',
      timer: null,
    }
  },
  mounted() {},
  methods: {
    showDia(row) {
      if (!row) {
        this.title = '新增'
      } else {
        this.title = '查看'
        this.form = Object.assign({}, row)
      }
      this.dialog = true
    },
    close() {
      // this.$refs['form'].resetFields()
      // this.form = this.$options.data().form
      this.dialog = false
    },
    save() {
      this.$baseMessage('模拟保存成功', 'success')
      this.$emit('fetch-data')
      this.close()
    },    
    moreQuery() {
      this.isShow = !this.isShow
    },   
    handleClose(done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要打印吗？')
        .then((_) => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch((_) => {})
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
  },
}
</script>